<template>
  <div class="home">
    <div class="content">
      <div>
        <label>昵称</label>
        <input type="text" v-model="nickname"/>
      </div>
      <div>
        <label>手机号</label>
        <input type="text" v-model="phoneNumber"/>
      </div>
      <div>
        <label>密码</label>
        <input type="text" v-model="password"/>
      </div>
    </div>
    <div>
      <button :disabled="!this.disable" 
      :class="this.disable?'login_button_able':'login_button_disable'"
      @click="onClick">登录</button>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  components: {
    
  },
  data(){
    return{
      nickname:"",
      phoneNumber:"",
      password:""
    }
  },
  computed:{
    disable:function(){
      if(this.nickname.length===0 || this.phoneNumber.length===0 || this.password.length===0){
        return false
      }
      return true
    }
  },
  methods:{
    onClick(){
      var reg = /^1[3|4|5|7|8][0-9]{9}$/; //验证规则
      if(!reg.test(this.phoneNumber)){
        alert("手机号错误");
        return;
      }

      if(this.password.length < 6){
        alert("密码");
        return;
      }

      this.$store.commit("CHANGE",{nickname:this.nickname,phone:this.phoneNumber,password:this.password});
      this.$router.push("/about")
    }
  }
}
</script>

<style scoped>
.home
{
  width: 100vw;
  height: 100vh;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.content
{
  width: 80%;

}

.login_button_able
{
  background-color: greenyellow;
}

.login_button_disable
{
  background-color: lightgrey;
}
</style>